<template>
  <div class="projectContainer">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>方案管理</span>
      </div>
      <el-table
        :cell-style="{textAlign:'center'}"
        :data="projectData"
        :header-cell-style="{textAlign:'center'}"
        style="width: 100%"
      >
        <el-table-column
          label="预算ID"
          prop="budgetId"
        />
        <el-table-column
          label="税费"
          prop="dues"
        />
        <el-table-column
          label="运费"
          prop="freight"
        />
        <el-table-column
          label="金额合计"
          prop="totalMoney"
        />
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        style="margin: 20px 0;float: right"
        v-show="queryParams.total>0"
        :total="queryParams.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getData"
      />
    </el-card>
    <!--  编辑方案管理对话框-->
    <el-dialog
      title="编辑方案管理信息"
      :visible.sync="editDialogVisible"
      width="30%">
      <el-form ref="form" :model="editForm" label-width="80px">
        <el-form-item label="预算ID">
          <el-input v-model="editForm.budgetId"></el-input>
        </el-form-item>
        <el-form-item label="税费">
          <el-input v-model="editForm.dues"></el-input>
        </el-form-item>
        <el-form-item label="运费">
          <el-input v-model="editForm.freight"></el-input>
        </el-form-item>
        <el-form-item label="金额合计">
          <el-input v-model="editForm.totalMoney"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editSubmit">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import {delProjectList, editProjectList, getProjectList, queryProjectList} from "@/api/project";

export default {
  name: 'Project',
  data(){
    return{
      //方案管理表单数据
      editForm: {},
      id:"",
      //方案管理对话框显示与隐藏
      editDialogVisible:false,
      //分页查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        total:0
      },
      //方案管理数据
      projectData:[
        {
          projectID:1,
        }
      ]
    }
  },
  created() {
    this.getData()
  },
  methods:{
  //  获取预算管理数据
    getData(){
      getProjectList().then(res=>{
        this.projectData=res.data.records
        this.queryParams.total=res.data.total
      })
    },
  //  预算管理编辑
    edit(row){
      const id=row.id
      this.id=row.id
      this.editDialogVisible=true
      queryProjectList(id).then(res=>{
        this.editForm=res.data
        console.log(res)
      })
    },
  //  提交预算管理信息
    editSubmit(){
      editProjectList({
        id:this.id,
        budgetId:this.editForm.budgetId,
        dues:this.editForm.dues,
        freight:this.editForm.freight,
        totalMoney:this.editForm.totalMoney
      }).then(()=>{
        this.$message.success('更新成功')
        this.getData()
        this.editDialogVisible=false
      })
    },
  //  删除预算管理信息
    del(row){
      const id=row.id
      this.$confirm('您确定要删除数据么？','提示',{
        confirmButtonText:"确定",
        cancelButtonText:"取消",
        type:"warning"
      }).then(()=>{
        return delProjectList(id).then(()=>{
          this.getData()
          this.$message.success('删除成功')
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.projectContainer {
  padding: 20px;
}
</style>
